<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-4</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        span {
            background: red;
            display: inline-block;
            padding: 10px;
            color: #fff;
            margin: 10px 0;
        }
        
        .changeColor span {
            background: green;
        }
        /*注意：apan:after冒号两边不能有空格*/
        
        .changeLength span:after {
            content: "length";
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <h2>动态绑定CSS</h2>
    <div id='vue-app'>
        <h2> 示例1 </h2>
        <!-- 只有class才行， 里面是一个对象, 只取两个值， false和true -->
        <span v-bind:class="{red:true, blue:false}"></span>
        <!-- <h2> 示例2 </h2>
		<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor : changeColor}">
			<span>henry</span>
		</div> -->
        <h2>示例3</h2>
        <button v-on:click="changeColor = !changeColor">changeColor</button>
        <button v-on:click="changeLength = !changeLength"> changeLength </button>
        <div v-bind:class="compClasses">
            <span>Henry</span>
        </div>

    </div>
    <script type="text/javascript" src="vue-4-app.js"></script>
</body>

</html>